<template>
  <m-layout type="primary">
    <mt-header slot="header" title="选择班级" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section :borderTop="false">
        <m-divider>
          <m-calendar-range class="date" v-model="date" value="date"/>
        </m-divider>
      </m-section>
      <m-section :border-bottom="false">
        <e-heading>上课班级</e-heading>
        <div v-if="list.list && list.list.length > 0">
          <mt-loadmore :bottom-method="loadBottom" ref="loadmore" class="">
            <mt-cell v-for="(item, index) in list.list" :key="index"
              :to="`/grade/student?id=${item.classScheduleId}&stime=${params.beginTime}&etime=${params.endTime}&teacherId=${item.teacherId}`"
              :value="item.time"
              is-link>
              <div slot="title">
                {{`${item.scheduleName } (${item.schooleName} ${item.classesName})`}}
                <m-tag plain :type="['warning', 'link', 'success'][item.properties]">{{properties[item.properties]}}</m-tag>
              </div>
            </mt-cell>
          </mt-loadmore>
        </div>
        <e-placeholder v-else />
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
import MCalendarRange from '@/views/components/CalendarRange'

export default {
  components: {
    MCalendarRange
  },
  computed: {
    ...mapState({
      list: state => state.grade.class
    })
  },
  watch: {
    date (val) {
      this.params.beginTime = new Date(val[0]).format('yyyy-MM-dd')
      this.params.endTime = new Date(val[1]).format('yyyy-MM-dd')
      this.getList()
    }
  },
  data () {
    return {
      value: '',
      date: null,
      properties: ['专', '综', '次'],
      params: {
        studentId: null, // 家长端需要该参数
        beginTime: '',
        endTime: '',
        page: 1,
        rows: 10
      }
    }
  },
  mounted () {
    let now = new Date()
    let day = now.getDay()
    let beginTime = new Date(now.getTime() - 86400000 * (day - 1))
    let endTime = new Date(now.getTime() + 86400000 * (7 - day))
    this.date = [beginTime, endTime]
  },
  methods: {
    getList (page) {
      this.params.page = page || this.params.page
      this.$store.dispatch('grade/class', this.params)
    },
    loadBottom () {
      if (this.params.page < this.list.pages) {
        this.getList(this.params.page + 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .class-title{
    font-weight: bold;
    padding: 0 .24rem;
    line-height: .9rem;
  }
  .date{
    width: 100%;
    text-align: center
  }
  .info{
    padding: 0 .24rem .24rem
  }
</style>
